<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head, Link, useForm, router } from '@inertiajs/vue3';
import { ref } from 'vue';

const props = defineProps({
    bars: {
        type: Object,
        required: true,
    },
    popularBars: {
        type: Array,
        default: () => [],
    },
    filters: {
        type: Object,
        default: () => ({}),
    },
});

const searchForm = useForm({
    search: props.filters.search || '',
});

const handleSearch = () => {
    router.get(route('bars.index'), searchForm.data(), {
        preserveState: true,
        replace: true,
    });
};

const getBarAvatar = (bar) => {
    if (bar.avatar) {
        return bar.avatar.startsWith('http') ? bar.avatar : `/storage/${bar.avatar}`;
    }
    return `https://api.dicebear.com/7.x/shapes/svg?seed=${bar.name}`;
};
</script>

<template>
    <Head title="贴吧列表" />

    <AuthenticatedLayout>
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- 左侧主要内容区域 -->
            <div class="lg:col-span-2 space-y-6">
                <!-- 贴吧列表卡片 -->
                <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                    <div class="px-6">
                        <h2 class="text-2xl font-bold mb-4">全部贴吧</h2>
                    </div>

                    <div class="px-6 space-y-4">
                        <!-- 贴吧项 -->
                        <Link
                            v-for="bar in bars.data"
                            :key="bar.id"
                            :href="route('bars.show', bar.slug)"
                            class="flex items-center gap-4 p-4 rounded-lg border hover:bg-accent cursor-pointer transition-colors"
                        >
                            <img
                                :src="getBarAvatar(bar)"
                                :alt="bar.name"
                                class="w-16 h-16 rounded-lg flex-shrink-0"
                            />
                            <div class="flex-1 min-w-0">
                                <div class="font-semibold text-lg mb-1">{{ bar.name }}</div>
                                <p class="text-sm text-muted-foreground line-clamp-2 mb-2">{{ bar.description || '暂无简介' }}</p>
                                <div class="flex items-center gap-4 text-sm text-muted-foreground">
                                    <span>{{ bar.member_count }} 成员</span>
                                    <span>{{ bar.post_count }} 帖子</span>
                                </div>
                            </div>
                        </Link>

                        <!-- 空状态 -->
                        <div v-if="bars.data.length === 0" class="text-center py-12 text-muted-foreground">
                            <p>暂无贴吧</p>
                            <Link
                                v-if="$page.props.auth?.user"
                                :href="route('bars.create')"
                                class="mt-4 inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 px-4 py-2"
                            >
                                创建第一个贴吧
                            </Link>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div v-if="bars.links && bars.links.length > 3" class="px-6 pt-6 border-t mt-4">
                        <div class="flex items-center justify-center gap-2">
                            <Link
                                v-for="(link, index) in bars.links"
                                :key="index"
                                :href="link.url || '#'"
                                v-html="link.label"
                                :class="[
                                    'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-all h-9 px-3 py-2',
                                    link.active
                                        ? 'bg-primary text-primary-foreground shadow-sm'
                                        : link.url
                                            ? 'border bg-background shadow-sm hover:bg-accent hover:text-accent-foreground'
                                            : 'text-muted-foreground cursor-not-allowed pointer-events-none'
                                ]"
                            />
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧边栏 -->
            <div class="space-y-6">
                <!-- 热门贴吧卡片 -->
                <div class="bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm">
                    <div class="px-6">
                        <h3 class="text-lg font-bold mb-4">热门贴吧</h3>
                        <div class="space-y-3">
                            <Link
                                v-for="bar in popularBars"
                                :key="bar.id"
                                :href="route('bars.show', bar.slug)"
                                class="flex items-center gap-3 p-3 rounded-lg hover:bg-accent cursor-pointer transition-colors"
                            >
                                <img
                                    :src="getBarAvatar(bar)"
                                    :alt="bar.name"
                                    class="w-12 h-12 rounded-lg flex-shrink-0"
                                />
                                <div class="flex-1 min-w-0">
                                    <div class="font-semibold truncate">{{ bar.name }}</div>
                                    <div class="text-sm text-muted-foreground">{{ bar.member_count }} 成员</div>
                                </div>
                            </Link>
                        </div>
                    </div>
                </div>

                <!-- 创建贴吧按钮卡片 -->
                <Link
                    v-if="$page.props.auth?.user"
                    :href="route('bars.create')"
                    class="flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all bg-primary text-primary-foreground shadow-sm hover:bg-primary/90 h-9 px-4 py-2"
                >
                    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                    </svg>
                    创建贴吧
                </Link>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

